<template>
	<view class="home-container">
		<view class="header-section">
			<view class="user-info">
				<!-- 替换 u-avatar 为原生 image -->
				<image
					class="user-avatar"
					:src="userInfo?.avatar || '/static/home/20251015-210727.jpg'"
				></image>
				<view class="user-details">
					<text class="username">{{ userInfo?.username || '游客' }}</text>
					<text class="welcome">欢迎使用 ShapeUp 健身</text>
				</view>
			</view>
		</view>
		
		<!-- 使用 Vant Grid 组件替代原有的网格布局 -->
		<van-grid column-num="3" border="false">
			<van-grid-item icon="calendar-o" text="课程预约" @click="goToCourses" />
			<van-grid-item icon="passed" text="签到打卡" @click="goToCheckin" />
			<van-grid-item icon="vip-card" text="会员卡" @click="goToMemberCard" />
			<van-grid-item icon="user-o" text="个人中心" @click="goToProfile" />
			<van-grid-item icon="chart-trending-o" text="数据统计" @click="goToStatistics" />
			<van-grid-item icon="service-o" text="在线客服" @click="goToCustomerService" />
		</van-grid>
		
		<!-- 使用 Vant 通知栏组件 -->
		<van-notice-bar
			left-icon="volume-o"
			text="欢迎使用 ShapeUp 健身管理系统，祝您健身愉快！"
			mode="closeable"
		/>
	</view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { authApi } from '../../src/services/api'

// 用户信息
const userInfo = ref<any>(null)

// 在页面加载时获取用户信息
onMounted(() => {
  // 从本地存储获取用户信息
  const storedUser = uni.getStorageSync('user')
  if (storedUser) {
    userInfo.value = storedUser
  } else {
    // 如果本地没有用户信息，尝试从API获取
    fetchUserInfo()
  }
})

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const response: any = await authApi.getUserInfo()
    userInfo.value = response.data
    // 更新本地存储
    uni.setStorageSync('user', response.data)
  } catch (error) {
    console.error('获取用户信息失败:', error)
    uni.showToast({
      title: '获取用户信息失败',
      icon: 'none'
    })
  }
}

// 处理登出
const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: async function (res) {
      if (res.confirm) {
        try {
          await authApi.logout()
        } catch (error) {
          console.error('Logout error:', error)
        } finally {
          // 清除本地存储的令牌和用户信息
          uni.removeStorageSync('token')
          uni.removeStorageSync('user')

          // 显示成功消息
          uni.showToast({
            title: '已退出登录',
            icon: 'success'
          })

          // 跳转到登录页面
          setTimeout(() => {
            uni.redirectTo({
              url: '/pages/auth/login'
            })
          }, 1500)
        }
      }
    }
  })
}

// 跳转到课程预约页面
const goToCourses = () => {
  uni.switchTab({
    url: '/pages/course/list'
  })
}

// 跳转到签到打卡页面
const goToCheckin = () => {
  uni.switchTab({
    url: '/pages/checkin/index'
  })
}

// 跳转到会员卡页面
const goToMemberCard = () => {
  uni.navigateTo({
    url: '/pages/member/card'
  })
}

// 跳转到个人中心
const goToProfile = () => {
  uni.switchTab({
    url: '/pages/profile/index'
  })
}

// 跳转到数据统计
const goToStatistics = () => {
  uni.navigateTo({
    url: '/pages/statistics/index'
  })
}

// 跳转到在线客服
const goToCustomerService = () => {
  uni.navigateTo({
    url: '/pages/chat/index'
  })
}
</script>

<style lang="scss" scoped>
.home-container {
  min-height: 100vh;
  background-color: #FFFFFF;
  
    
  .header-section {
    background-color: #fff;
    padding: 40rpx 30rpx;
    margin-bottom: 20rpx;
    
    .user-info {
      display: flex;
      align-items: center;
      
      .user-avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
      }
      
      .user-details {
        margin-left: 20rpx;
        display: flex;
        flex-direction: column;
        
        .username {
          font-size: 36rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 10rpx;
        }
        
        .welcome {
          font-size: 28rpx;
          color: #999;
        }
      }
    }
  }
  
  .features-grid {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .feature-item {
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30rpx 0;
      
      .feature-icon {
        font-size: 28px;
        margin-bottom: 10rpx;
      }
      
      .feature-text {
        margin-top: 15rpx;
        font-size: 28rpx;
        color: #333;
      }
      
      &:active {
        opacity: 0.7;
      }
    }
  }
  
  .custom-notice-bar {
    margin: 0 20rpx;
    padding: 10rpx 20rpx;
    background-color: #f0e6ff;
    border-radius: 4px;
    
    .notice-text {
      font-size: 24rpx;
      color: #4B0082;
    }
  }
}
</style>